<template>
  <div class="detail-wrapper">
    <div class="header">
      <span>
        <span>{{ form.name }}</span>
        <el-tag :type="getDictStyle('task_status', form.status)">
          {{ getDictValue('task_status', form.status) }}
        </el-tag>
      </span>
      <span>
        <span class="name"
          >关联巡检计划：<span
            class="name-word"
            @click="
              router.push({
                name: 'planManageDetail',
                query: {
                  pkid: form.planId,
                },
              })
            "
            >{{ form.planName }}</span
          ></span
        >
        <span class="name"
          >任务时间：{{ moment(form.beginTime).format('YYYY-MM-DD') }} -
          {{ moment(form.endTime).format('YYYY-MM-DD') }}</span
        >
      </span>
    </div>
    <Tabs
      @change="(val) => (currentComponentKey = val)"
      :currentKey="currentComponentKey"
      :tabsConfig="tabsConfig"
    />
    <div class="detail">
      <div
        class="detail-item"
        v-for="(item, index) of pointTable[currentComponentKey]"
        :key="index"
      >
        <div class="title">
          <span style="margin-right: 20px">开始时间：{{ item.startTime }}</span>
          <span>结束时间：{{ item.endTime }}</span>
        </div>
        <el-table class="custom-table" :data="item.list">
          <el-table-column type="index" label="序号" width="60px" />
          <el-table-column prop="pointName" label="检查点名称" />
          <el-table-column prop="senceName" label="检查点场景" />
          <el-table-column prop="address" label="地理位置" />
          <el-table-column
            prop="defaultUserName"
            label="默认巡检人员"
            :show-overflow-tooltip="true"
          />
          <el-table-column prop="actualUserName" label="实际巡检人员" />
          <el-table-column prop="operateTime" label="操作时间" />
          <el-table-column prop="status" label="完成状态">
            <template #default="scope">
              <!-- <el-tag v-if="scope.row.isCompleted === 1" type="primary"
                >已完成</el-tag
              >
              <el-tag v-else type="warning">未完成</el-tag> -->
              <el-tag
                :type="
                  getDictStyle(
                    'inspection_point_item_process',
                    scope.row.status,
                  )
                "
                >{{
                  getDictValue(
                    'inspection_point_item_process',
                    scope.row.status,
                  )
                }}</el-tag
              >
            </template>
          </el-table-column>
          <el-table-column prop="isCompleted" label="检查点状态">
            <template #default="scope">
              <el-tag
                v-if="scope.row.abnormal && scope.row.status === '1'"
                :type="
                  getDictStyle(
                    'inspection_point_item_status',
                    scope.row.abnormal,
                  )
                "
                >{{
                  getDictValue(
                    'inspection_point_item_status',
                    scope.row.abnormal,
                  )
                }}</el-tag
              >
            </template>
          </el-table-column>
          <el-table-column label="操作" width="100px">
            <template #default="scope">
              <el-button
                link
                type="primary"
                @click="handleCheckContent(scope.row)"
                >查看</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="title">巡检轨迹</div>
      <MapboxMap
        :map-id="mapId"
        @after-map-loaded="afterMapLoaded"
        @before-map-destroyed="beforeMapDestroyed"
      />
    </div>
    <CheckContentDialog ref="checkContentDialogRef" />
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { getTaskDetail } from '@/api/manager/inspectionManage/taskManage.js'
import Tabs from '@/components/tabs/index.vue'
import CheckContentDialog from './components/checkContentDialog.vue'
import moment from 'moment'
import { useRoute, useRouter } from 'vue-router'
import { useDict } from '@/hooks/useDict'
const { dict, getDictStyle, getDictValue } = useDict()
import mapboxgl, { LngLat } from 'mapbox-gl'
import MapboxMap from '@/components/mapbox-map.vue'
import { nanoid } from 'nanoid'
const mapId = nanoid()

let _map
let _marker
let _popup

let markers = []

const afterMapLoaded = async (id, map) => {
  _map = map
  resizeMap()
}

const beforeMapDestroyed = (id, map) => {}

const resizeMap = () => {
  setTimeout(() => {
    _map?.resize()
  })
}

const router = useRouter()
const route = useRoute()
const form = ref({})
const tabsConfig = ref([])
const currentComponentKey = ref('')
const pointTable = ref({})

const handleDetail = async () => {
  const res = await getTaskDetail({ pkid: route.query.pkid })
  const areas = []
  res.data.areaDetailList.forEach((item) => {
    areas.push({
      name: item.areaName,
      value: item.areaId,
    })
    const points = []
    for (let key in item.timePointsMap) {
      const timeArr = key.split('|')
      points.push({
        startTime: timeArr[0],
        endTime: timeArr[1],
        list: item.timePointsMap[key],
      })
    }
    pointTable.value[item.areaId] = points
  })
  tabsConfig.value = areas
  currentComponentKey.value = tabsConfig.value[0].value
  form.value = { ...res.data }
}

const checkContentDialogRef = ref()
const handleCheckContent = (row) => {
  checkContentDialogRef.value.searchParams = {
    taskId: route.query.pkid,
    areaId: currentComponentKey.value,
    pointId: row.pointId,
  }
  checkContentDialogRef.value.dialogVisible = true
}
onMounted(() => {
  if (route.query.pkid) {
    handleDetail()
  }
})
</script>

<style lang="scss" scoped>
.detail-wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  box-shadow: 0 0 10px 0 rgba(72, 121, 238, 0.1);
  .header {
    width: 100%;
    height: 54px;
    box-sizing: border-box;
    padding: 0 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 400;
    font-size: 16px;
    color: #333333;
    border-bottom: 1px solid #dee4ed;
    .el-tag {
      margin-left: 20px;
    }
    .name {
      font-size: 14px;
    }
    .name-word {
      color: #6297f5;
      cursor: pointer;
      margin-right: 10px;
    }
  }
  .tabs-wrapper {
    box-shadow: none;
    background: #f3f7fe;
  }

  .detail {
    width: 100%;
    flex: 1;
    box-sizing: border-box;
    padding: 20px 30px;
    overflow-y: auto;
    .title {
      font-size: 14px;
      font-weight: 400;
      color: #151515;
      position: relative;
      padding-left: 10px;
      margin-bottom: 20px;
      display: flex;
      align-items: center;

      &::before {
        content: ' ';
        position: absolute;
        left: 0;
        top: 50%;
        width: 4px;
        height: 16px;
        background: linear-gradient(0deg, #4575ee 0%, #6297f5 100%);
        border-radius: 2px;
        transform: translateY(-50%);
      }
      .el-button {
        margin-left: 10px;
      }
    }
    .custom-table {
      margin-bottom: 30px;
    }
    .mapbox-map {
      width: 100%;
      height: 500px;
    }
  }
}
</style>
